import {App, PluginSettingTab, Setting} from "obsidian";
import SelectionReplacePlugin from "./main";
import {CommonUI, RegexDef} from "./common";

export class SettingTab extends PluginSettingTab {
    plugin: SelectionReplacePlugin;
    commonUI: CommonUI;

    constructor(app: App, plugin: SelectionReplacePlugin) {
        super(app, plugin);
        this.plugin = plugin;
        this.commonUI = new CommonUI(this.containerEl, this.plugin);
    }

    // arraymove<T>(
    //     arr: T[],
    //     fromIndex: number,
    //     toIndex: number
    // ): void {
    //     if (toIndex < 0 || toIndex === arr.length) {
    //         return;
    //     }
    //     const element = arr[fromIndex];
    //     arr[fromIndex] = arr[toIndex];
    //     arr[toIndex] = element;
    // }

    display(): void {
        this.containerEl.empty();
        this.commonUI.display();
        // const { containerEl } = this;
        // containerEl.empty();
        // this.containerEl.createEl("h2", { text: "Define Regex" });
        //
        // const desc = document.createDocumentFragment();
        // desc.append(
        //     "Define regex."
        // );
        //
        // new Setting(this.containerEl).setDesc(desc);
        //
        // this.plugin.settings.replacePageRegexes.forEach((regexText, index) => {
        //     const s = new Setting(this.containerEl)
        //         .addText(text => text
        //             .setPlaceholder('`(.*)__([0-9a-f]{5,40})(\.\S+)?`')
        //             .setValue(this.plugin.settings.replacePageRegexes[index].regexText)
        //             .onChange(async (value) => {
        //                     this.plugin.settings.replacePageRegexes[index].regexText = value;
        //                     await this.plugin.saveSettings();
        //                 }
        //             ))
        //         .addExtraButton((cb) => {
        //             cb.setIcon("up-chevron-glyph")
        //                 .setTooltip("Move up")
        //                 .onClick(() => {
        //                     this.arraymove(
        //                         this.plugin.settings.replacePageRegexes,
        //                         index,
        //                         index - 1
        //                     );
        //                     this.plugin.saveSettings();
        //                     this.display();
        //                 });
        //         })
        //         .addExtraButton((cb) => {
        //             cb.setIcon("down-chevron-glyph")
        //                 .setTooltip("Move down")
        //                 .onClick(() => {
        //                     this.arraymove(
        //                         this.plugin.settings.replacePageRegexes,
        //                         index,
        //                         index + 1
        //                     );
        //                     this.plugin.saveSettings();
        //                     this.display();
        //                 });
        //         })
        //         .addExtraButton((cb) => {
        //             cb.setIcon("cross")
        //                 .setTooltip("Delete")
        //                 .onClick(() => {
        //                     this.plugin.settings.replacePageRegexes.splice(
        //                         index,
        //                         1
        //                     );
        //                     this.plugin.saveSettings();
        //                     // Force refresh
        //                     this.display();
        //                 });
        //         })
        // });
        // new Setting(this.containerEl).addButton((cb) => {
        //     cb.setButtonText("Add")
        //         .setCta()
        //         .onClick(() => {
        //             this.plugin.settings.replacePageRegexes.push(new RegexDef());
        //             this.plugin.saveSettings();
        //             // Force refresh
        //             this.display();
        //         });
        // });
        // // new Setting(containerEl)
        // //     .setName('Replace Page Regex')
        // //     .setDesc('regex for replace page text.')
        // //     .setClass('long-description-setting-item')
        // //     .addText(text => text
        // //         .setPlaceholder('input valid regular expression.')
        // //         .setValue(this.plugin.settings.replacePageRegex)
        // //         .onChange(async (value) => {
        // //               this.plugin.settings.replacePageRegex = value;
        // //               await this.plugin.saveSettings();
        // //             }
        // //         ));
        // // new Setting(containerEl)
        // //     .setName('Replace Page Regex2')
        // //     .setDesc('regex2 for replace page text.')
        // //     .setClass('long-description-setting-item')
        // //     .addText(text => text
        // //         .setPlaceholder('input valid regular expression.')
        // //         .setValue(this.plugin.settings.replacePageRegex2)
        // //         .onChange(async (value) => {
        // //               this.plugin.settings.replacePageRegex2 = value;
        // //               await this.plugin.saveSettings();
        // //             }
        // //         ));
        // new Setting(containerEl)
        //     .setName('Replace Page Template')
        //     .setDesc('{{%1}} is replaced by regex match group 1.')
        //     .setClass('long-description-setting-item')
        //     .addText(text => text
        //         .setPlaceholder('e.g. [本地知识库](http://localhost:3000/{{%2}}{{%3}}#~:~hint={{%1}})')
        //         .setValue(this.plugin.settings.replacePageTemplate)
        //         .onChange(async (value) => {
        //                 this.plugin.settings.replacePageTemplate = value;
        //                 await this.plugin.saveSettings();
        //             }
        //         ));
        // new Setting(containerEl)
        //     .setName('Replace Page Default Replacements')
        //     .setDesc('use comma(,) as separator, define the default value if regex match group empty.')
        //     .addText(text => text
        //         .setPlaceholder("e.g. '{{%3}}=.html'")
        //         .setValue(this.plugin.settings.replacePageDefaultReplacements)
        //         .onChange(async (value) => {
        //                 this.plugin.settings.replacePageDefaultReplacements = value;
        //                 await this.plugin.saveSettings();
        //             }
        //         ));
        // new Setting(containerEl)
        //     .setName('Vault Start Location')
        //     .setDesc('the root location for vault level replacement.')
        //     .addText(text => text
        //         .setPlaceholder("e.g. 0_Workshop/working/obsidian-selection-replace")
        //         .setValue(this.plugin.settings.vaultReplaceStartLocation)
        //         .onChange(async (value) => {
        //                 this.plugin.settings.vaultReplaceStartLocation = value;
        //                 await this.plugin.saveSettings();
        //             }
        //         ));
        // // new Setting(containerEl)
        // //     .setName('Replace Selection Regex')
        // //     .setDesc('regex for replace selection text.')
        // //     .setClass('long-description-setting-item')
        // //     .addText(text => text
        // //         .setPlaceholder('input valid regular expression.')
        // //         .setValue(this.plugin.settings.replaceSelectionRegex)
        // //         .onChange(async (value) => {
        // //               this.plugin.settings.replaceSelectionRegex = value;
        // //               await this.plugin.saveSettings();
        // //             }
        // //         ));
        // // new Setting(containerEl)
        // //     .setName('Replace Selection Template')
        // //     .setDesc('template for replace selection text.')
        // //     .setClass('long-description-setting-item')
        // //     .addText(text => text
        // //         .setPlaceholder('e.g. {{%1}} is replaced by regex match group 1.')
        // //         .setValue(this.plugin.settings.replaceSelectionTemplate)
        // //         .onChange(async (value) => {
        // //               this.plugin.settings.replaceSelectionTemplate = value;
        // //               await this.plugin.saveSettings();
        // //             }
        // //         ));
        // // new Setting(containerEl)
        // //     .setName('Replace Selection Default Replacements')
        // //     .setDesc('use comma(,) as separator, define the default value if regex match empty.')
        // //     .addText(text => text
        // //         .setPlaceholder("e.g. 'na, na, na, .html'")
        // //         .setValue(this.plugin.settings.replaceSelectionDefaultReplacements)
        // //         .onChange(async (value) => {
        // //               this.plugin.settings.replaceSelectionDefaultReplacements = value;
        // //               await this.plugin.saveSettings();
        // //             }
        // //         ));
    }
}